// 引入generic.js模块中的generic函数
import { generic } from './generic.js';
// 调用generic函数
generic();
// 获取具有类名为sampimg的所有元素，转换成数组
const sampimg = [...document.querySelectorAll('.sampimg')];
//获取list，实现拖拽效果
const lists = [...document.querySelectorAll('.list')];
//获取tittle,拖拽的时候消失隐藏
const tittle = document.querySelectorAll('.tittle');
window.addEventListener('load', async () => {
  const { data } = await axios({
    // 请求地址
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    // 请求方式
    method: 'GET',
    params: {
      carouselGroupId: '1323',
    },
  });
  //渲染数据
  const pictureAll = data.data.Carousels;
  for (let i = 0; i < pictureAll.length; i++) {
    sampimg[i].innerHTML = `
    <img src="${pictureAll[i].url}" alt="" id="bigImg" />
    `;
  }
});
// 遍历lists数组中的元素
lists.slice(0, -1).forEach((list, index) => {
  // 准备开关
  let flag = false;
  // 记录鼠标点击点到div的偏移量
  let disx;
  //默认初始位置
  list.style.left = 610 + 'px';
  // 防止a标签跳转
  list.addEventListener('click', function (e) {
    e.preventDefault();
  });
  // 鼠标按下实行拖拽
  list.addEventListener('mousedown', down);
  function down(e) {
    flag = true;
    disx = e.clientX - list.offsetLeft;
    e.stopPropagation();
    document.addEventListener('mousemove', move);
  }
  //移动
  function move(e) {
    if (flag) {
      let left = e.clientX - disx;
      // 根据left值判断是否隐藏tittle
      if (left <= 600) {
        // 移动list
        list.style.left = left + 'px';
        //文字消失
        tittle[index].style.opacity = '0';
      } else {
        //恢复默认位置
        list.style.left = 610 + 'px';
        tittle[index].style.opacity = '1';
      }
    }
    e.stopPropagation();
  }
  // 鼠标松开取消拖拽
  document.addEventListener('mouseup', function (e) {
    flag = false;
    e.stopPropagation();
    document.removeEventListener('mousemove', move);
  });
});
